import React, {lazy, Suspense, useEffect} from "react";
// import {getSideBar} from '../api/index'
import {HashRouter as BrowserRouter, Route, Switch, withRouter} from "react-router-dom";
import {Col, Layout, Row} from "antd";
import SideNav from "../page/common/SideNav";
import ProjectHeader from '../page/common/Header'
import menus from './RouteMap'

import Login from "../page/Login"

const {Sider, Content, Header, Footer} = Layout;

const Routers = props => {
	// const [menus,setMenus] = useState([])

	console.log('render Routers')
	// console.log('props', props)
	const supportsHistory = "pushState" in window.history;

	const body = document.querySelector("body");

	const offsetHeight = body.offsetHeight.toString() + "px";
	// useEffect(() => {
	//   if (!sessionStorage.getItem("token")) {
	//     props.history.push("/login")
	//   }
	// }, [])
	return (
		<>
			<Layout style={{minHeight: offsetHeight}}>
				<Header
					style={{
						background: "#fff",
						fontWeight: "400",
						fontSize: "24px"
					}}
				>
					<ProjectHeader/>
				</Header>
				<Layout>
					<Sider style={{background: "rgba(0,0,0,0)"}}>
						<SideNav menus={menus}/>
					</Sider>
					<Content>
						<Suspense fallback={<div className="index-loading">加载中...</div>}>
							<Row>
							{/*<Row style={{width: '1000px', overflowX: 'auto'}}>*/}
								<Col style={{margin: "15px 15px"}}>
									<Switch>
										{
											props.children
										}
									</Switch>
								</Col>
							</Row>
						</Suspense>
					</Content>
				</Layout>
				<Footer></Footer>
			</Layout>
		</>
	);
};

export default withRouter(Routers);
